<template>
  <section class="areaSelect">
    <el-select clearable
      :disabled="isShow"
      v-model="province"
      placeholder="省"
      @change="getOpt1()"
      style="margin-right: 10px"
    >
      <el-option
        :label="item.name"
        v-for="(item, index) in provinceList"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select clearable
      :disabled="isShow"
      v-model="city"
      placeholder="市"
      @change="getOpt2()"
      no-data-text="请先选择省"
      style="margin-right: 10px"
    >
      <el-option
        :label="item.name"
        v-for="(item, index) in cityList"
        :value="item.id"
      ></el-option>
    </el-select>
    <el-select clearable
      :disabled="isShow"
      v-model="district"
      placeholder="区/县"
      no-data-text="请先选择市"
      @change="getOpt3()"
    >
      <el-option
        :label="item.name"
        v-for="(item, index) in districtList"
        :value="item.id"
      ></el-option>
    </el-select>
  </section>
</template>

<script>
import { getAreaList } from '@/api/area.js'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    city (val) {
      this.getOpt1(true)
    },
    district (val) {
      this.getOpt2(true)
    }
  },

  data () {
    return {
      province: '',
      provinceList: [],
      city: '',
      cityList: [],
      district: '',
      districtList: [],
      areaVale: ''
    }
  },
  methods: {
    // 市
    getOpt1 (isValue) {
      let params = {
        parentId: this.province,
        delFlag: 0,
        pageSize: 100
      }
      getAreaList(params).then((res) => {
        if (res.data.code === '200') {
          this.cityList = res.data.result.list
        }
        if (isValue) {
          let area = {
            province: this.province,
            city: this.city,
            district: this.district
          }
          this.$emit('getArea', area)
          return
        }
        if (this.city !== '') {
          this.city = ''
        }
        let area = {
          province: this.province,
          city: this.city,
          district: this.district
        }
        this.$emit('getArea', area)
      })
      // if (this.province !== '') {
      //   this.getOpt1()
      //   // this.getOpt2()
      // }
    },
    // 区
    getOpt2 (isValue) {
      let params = {
        parentId: this.city,
        delFlag: 0,
        pageSize: 100
      }
      getAreaList(params).then((res) => {
        if (res.data.code === '200') {
          this.districtList = res.data.result.list

          //  this.districtList=this.districtList[0]
        }
        if (isValue) {
          let area = {
            province: this.province,
            city: this.city,
            district: this.district
          }
          this.$emit('getArea', area)
          return
        }
        if (this.district !== '') {
          this.district = ''
        }
        let area = {
          province: this.province,
          city: this.city,
          district: this.district
        }
        this.$emit('getArea', area)
      })
    },
    // 省
    getOpt (type, parentId) {
      let params = {
        parentId: 100000,
        delFlag: 0,
        pageSize: 100
      }
      if (type === 2) {
        getAreaList(params).then((res) => {
          if (res.data.code === '200') {
            this.provinceList = res.data.result.list
          }
          let area = {
            province: this.province,
            city: this.city,
            district: this.district
          }
          this.$emit('getArea', area)
        })
      }
    },
    getOpt3 () {
      let area = {
        province: this.province,
        city: this.city,
        district: this.district
      }
      this.$emit('getArea', area)
    }
  },
  mounted () {
    this.getOpt(2)
    // if (!area) {
    //   this.province=area.province;
    //   this.city=area.city;
    //   this.district=area.district;
    // }
  }
}
</script>
<style lang="scss" scoped>
.areaSelect {
  display: flex;
  width: inherit;
}
</style>